<template>
  <div class="detection">
    
    
    <div class="container">
      <div class="detection-header">
        <h1>{{$t('detection')}}</h1>
        <p>{{$t('detectionSubtitle')}}</p>
      </div>

      <!-- 品质指标 -->
      <div class="section">
        <h2 class="section-title">
          <el-icon><Monitor /></el-icon>
          {{$t('sectionQualityIndicators')}}
        </h2>
        <div class="indicators-grid">
          <div class="indicator-card" v-for="indicator in qualityIndicators" :key="indicator.id">
            <div class="indicator-icon">
              <el-icon><DataAnalysis /></el-icon>
            </div>
            <h3>{{ indicator.name }}</h3>
            <p class="indicator-desc">{{ indicator.description }}</p>
            <div class="indicator-details">
              <div class="detail-item">
                <span class="label">{{$t('labelMethod')}}</span>
                <span>{{ indicator.method }}</span>
              </div>
              <div class="detail-item">
                <span class="label">{{$t('labelRange')}}</span>
                <span>{{ indicator.range }}</span>
              </div>
              <div class="detail-item">
                <span class="label">{{$t('labelImportance')}}</span>
                <span>{{ indicator.importance }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 营养指标 -->
      <div class="section">
        <h2 class="section-title">
          <el-icon><Food /></el-icon>
          {{$t('sectionNutritionIndicators')}}
        </h2>
        <div class="indicators-grid">
          <div class="indicator-card" v-for="indicator in nutritionIndicators" :key="indicator.id">
            <div class="indicator-icon">
              <el-icon><Apple /></el-icon>
            </div>
            <h3>{{ indicator.name }}</h3>
            <p class="indicator-desc">{{ indicator.description }}</p>
            <div class="indicator-details">
              <div class="detail-item">
                <span class="label">{{$t('labelMethod')}}</span>
                <span>{{ indicator.method }}</span>
              </div>
              <div class="detail-item">
                <span class="label">{{$t('labelRange')}}</span>
                <span>{{ indicator.range }}</span>
              </div>
              <div class="detail-item">
                <span class="label">{{$t('labelNutritionValue')}}</span>
                <span>{{ indicator.nutritionValue }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 检测流程 -->
      <div class="section">
        <h2 class="section-title">
          <el-icon><Operation /></el-icon>
          {{$t('sectionProcess')}}
        </h2>
        <div class="process-flow">
          <div class="process-step" v-for="(step, index) in processSteps" :key="index">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <h4>{{ step.title }}</h4>
              <p>{{ step.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../components/Header.vue'

export default {
  name: 'Detection',
  components: {
    Header
  },
  data() {
    return {
      qualityIndicators: [
        {
          id: 1,
          name: this.$lang && this.$lang.language==='en' ? 'Protein' : '蛋白质',
          description: this.$lang && this.$lang.language==='en' ? 'Protein content is a key indicator affecting processing and nutrition.' : '小麦中蛋白质含量是衡量其品质的重要指标，直接影响面制品的加工性能和营养价值。',
          method: this.$lang && this.$lang.language==='en' ? 'Kjeldahl method' : '凯氏定氮法',
          range: '10-15%',
          importance: this.$lang && this.$lang.language==='en' ? 'Very high' : '极高'
        },
        {
          id: 2,
          name: this.$lang && this.$lang.language==='en' ? 'Wet gluten' : '湿面筋',
          description: this.$lang && this.$lang.language==='en' ? 'Reflects processing performance, key for premium products.' : '湿面筋含量反映小麦的加工性能，是制作优质面制品的关键指标。',
          method: this.$lang && this.$lang.language==='en' ? 'Manual/Instrument' : '手洗法/仪器法',
          range: '25-35%',
          importance: this.$lang && this.$lang.language==='en' ? 'Very high' : '极高'
        },
        {
          id: 3,
          name: this.$lang && this.$lang.language==='en' ? 'Farinograph parameters' : '粉质参数',
          description: this.$lang && this.$lang.language==='en' ? 'Water absorption, development time, stability, etc.' : '包括吸水率、形成时间、稳定时间等，反映面团流变学特性。',
          method: this.$lang && this.$lang.language==='en' ? 'Farinograph' : '粉质仪测定',
          range: this.$lang && this.$lang.language==='en' ? 'Variety dependent' : '根据品种而定',
          importance: this.$lang && this.$lang.language==='en' ? 'High' : '高'
        }
      ],
      nutritionIndicators: [
        {
          id: 1,
          name: this.$lang && this.$lang.language==='en' ? 'Dietary fiber' : '膳食纤维',
          description: this.$lang && this.$lang.language==='en' ? 'Important for health; aids digestion and prevention.' : '膳食纤维对人体健康具有重要作用，有助于消化和预防疾病。',
          method: this.$lang && this.$lang.language==='en' ? 'Enzymatic-gravimetric' : '酶重量法',
          range: '2-4%',
          nutritionValue: this.$lang && this.$lang.language==='en' ? 'Promotes digestion' : '促进消化，预防便秘'
        },
        {
          id: 2,
          name: this.$lang && this.$lang.language==='en' ? 'B vitamins' : 'B族维生素',
          description: this.$lang && this.$lang.language==='en' ? 'Essential vitamins involved in many metabolic processes.' : '包括B1、B2、B6等，是人体必需的维生素，参与多种代谢过程。',
          method: this.$lang && this.$lang.language==='en' ? 'HPLC' : '高效液相色谱法',
          range: '根据具体维生素而定',
          nutritionValue: this.$lang && this.$lang.language==='en' ? 'Supports nervous system' : '维持神经系统健康'
        },
        {
          id: 3,
          name: this.$lang && this.$lang.language==='en' ? 'Total polyphenols' : '总多酚',
          description: this.$lang && this.$lang.language==='en' ? 'Antioxidant properties that protect cells.' : '具有抗氧化作用，能够清除自由基，保护细胞免受氧化损伤。',
          method: this.$lang && this.$lang.language==='en' ? 'Folin–Ciocalteu' : '福林酚法',
          range: '0.1-0.5%',
          nutritionValue: this.$lang && this.$lang.language==='en' ? 'Antioxidant' : '抗氧化，抗衰老'
        },
        {
          id: 4,
          name: this.$lang && this.$lang.language==='en' ? 'Total flavonoids' : '总黄酮',
          description: this.$lang && this.$lang.language==='en' ? 'Various bioactivities including antioxidant and anti-inflammatory.' : '具有多种生物活性，包括抗氧化、抗炎、抗肿瘤等作用。',
          method: this.$lang && this.$lang.language==='en' ? 'Spectrophotometry' : '分光光度法',
          range: '0.05-0.2%',
          nutritionValue: this.$lang && this.$lang.language==='en' ? 'Anti-inflammatory' : '抗炎，增强免疫力'
        }
      ],
      processSteps: [
        {
          title: this.$lang && this.$lang.language==='en' ? 'Sample preparation' : '样品制备',
          description: this.$lang && this.$lang.language==='en' ? 'Crush and sieve wheat to prepare for testing.' : '将小麦样品进行粉碎、过筛，制备成适合检测的样品。'
        },
        {
          title: this.$lang && this.$lang.language==='en' ? 'Indicator testing' : '指标检测',
          description: this.$lang && this.$lang.language==='en' ? 'Use appropriate methods and instruments for each indicator.' : '根据不同的检测指标，采用相应的检测方法和仪器进行测定。'
        },
        {
          title: this.$lang && this.$lang.language==='en' ? 'Data processing' : '数据处理',
          description: this.$lang && this.$lang.language==='en' ? 'Statistical analysis to ensure accuracy and reliability.' : '对检测结果进行统计分析，确保数据的准确性和可靠性。'
        },
        {
          title: this.$lang && this.$lang.language==='en' ? 'Report' : '结果报告',
          description: this.$lang && this.$lang.language==='en' ? 'Generate detailed report with results and evaluation.' : '生成详细的检测报告，包含各项指标的检测结果和评价。'
        }
      ]
    }
  }
}
</script>

<style scoped>
.detection {
  min-height: 100vh;
  background: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.detection-header {
  text-align: center;
  margin-bottom: 3rem;
}

.detection-header h1 {
  color: #333;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.detection-header p {
  color: #666;
  font-size: 1.1rem;
}

.section {
  margin-bottom: 4rem;
  background: white;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #333;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #667eea;
}

.indicators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.indicator-card {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 1.5rem;
  border-left: 4px solid #667eea;
  transition: all 0.3s ease;
}

.indicator-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.indicator-icon {
  font-size: 2rem;
  color: #667eea;
  margin-bottom: 1rem;
}

.indicator-card h3 {
  color: #333;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.indicator-desc {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.indicator-details {
  background: white;
  border-radius: 5px;
  padding: 1rem;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #666;
  font-weight: 500;
}

.process-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 10px;
  position: relative;
}

.step-number {
  background: #667eea;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.step-content h4 {
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.step-content p {
  color: #666;
  line-height: 1.6;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .detection-header h1 {
    font-size: 2rem;
  }
  
  .indicators-grid {
    grid-template-columns: 1fr;
  }
  
  .process-flow {
    grid-template-columns: 1fr;
  }
  
  .detail-item {
    flex-direction: column;
    gap: 0.25rem;
  }
}
</style> 